<template>
  <el-card class="box-card" style="overflow:auto">
    <el-button v-on:click="back">返回</el-button>
    <el-divider content-position="left" class="detail_title">基础信息</el-divider>
    <el-card class="box-card">
      <b style="margin-left: 2%">群组名称&#8197 ：</b><a> {{ group.groupName }}</a>
      <b style="margin-left: 20%">群组人数&#8197 ：</b><a> {{ group.entity11Accounts.length }}</a>
    </el-card>
    <el-divider content-position="left" class="detail_title">成员信息</el-divider>
    <el-card class="box-card">
      <el-table :data="group.entity11Accounts" stripe style="width: 100%">
        <el-table-column prop="accountName" label="用户名称" width="180">
        </el-table-column>
        <el-table-column prop="accountId" label="用户账号" width="180">
        </el-table-column>
        <el-table-column prop="accountHomepage" label="用户首页" width="180">
        </el-table-column>
        <el-table-column prop="" label="">
          <template slot-scope="scope">
            <el-button size="mini" @click="toAgentDetail(scope.$index, scope.row)">查看详情</el-button>
            <el-button v-if="group.groupName!=='general'&&isRoot===1" size="mini" type="danger" @click="">移出该群组</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </el-card>
</template>
<script>
  export default {
    mounted: function () {
      this.getGroup();
    },
    data() {
      return {
        group: {
          groupName: '',
          entity11Accounts: []
        },
        agent: JSON.parse(localStorage.getItem("agent")),
        isRoot: 0,
      }
    },
    methods: {
      getGroup() {
        let that = this
        if (that.agent.agentTypeId === 0) {
          this.isRoot = 1
        }
        let url = "/api/group/show/" + this.$route.query.id
        this.$axios.get(url).then(successResponse => {
          that.group = successResponse.data
        }).catch(failResponse => {
        })
      },
      toAgentDetail(index, row){
        this.$router.push({path: '/agent/detail', query: {id: row.accountOpenid}})
      },
      back(){
        this.$router.go(-1);
      }
    }
  }

</script>
<style>
  .box-card {
    width: 100%;
    height: 100%;
    text-align: left;
  }

  .detail_title {
    margin-top: 2%;
  }

</style>
